<template>
  <div class="father" ref="chartRef"></div>
</template>

<script>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
import "echarts-gl";

export default {
  setup() {
    const chartRef = ref(null);

    onMounted(() => {
      if (chartRef.value) {
        const myChart = echarts.init(chartRef.value);
        const option = {
          tooltip: {},
          xAxis3D: {
            type: "category",
            data: ["1", "2", "3", "4", "5"],
            name: "X轴",
          },
          yAxis3D: {
            type: "category",
            data: ["1", "2", "3", "4", "5"],
            name: "Y轴",
          },
          zAxis3D: {
            type: "value",
            name: "Z轴",
          },
          grid3D: {
            viewControl: {
              autoRotate: true, // 自动旋转
              panSensitivity: 1, // 平移灵敏度
              zoomSensitivity: 1, // 缩放灵敏度
              rotateSensitivity: 1, // 旋转灵敏度
            },
            light: {
              main: {
                intensity: 1.2,
                shadow: true,
              },
              ambient: {
                intensity: 0.3,
              },
            },
          },
          // 这里修改数据系列
          series: [
            {
              type: "bar3D", //3D柱状图
              data: [
                [0, 0, 5], //这里是数组分别对应x,y,z轴的值，这里是二维数组
                [1, 0, 15],
                [2, 0, 25],
                [3, 0, 35],
                [4, 0, 45],
                [0, 1, 10],
                [1, 1, 18],
                [2, 1, 22],
                [3, 1, 30],
                [4, 1, 40],
              ],
              shading: "lambert",
              label: {
                show: true,
                formatter: "{b}",
              },
              itemStyle: {
                color: function (params) {
                  const value = params.value[2];
                  return value > 30 ? "#ff0000" : "#00ff00";
                },
              },
            },
          ],
        };
        myChart.setOption(option);
      }
    });
    return {
      chartRef,
    };
  },
};
</script>

<style scoped>
.father {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  height: 600px;
  margin: 0 auto;
  transform: translate(-50%, -50%);
}
</style>